<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box"></div>
    <script>
      /*
        1. 数组对象转化为表格
      */
      // 随机数
      const id = () => Math.ceil(Math.random() * 10000);

      const users = [
        { id: id(), name: "jack", age: 20, gender: 1 },
        { id: id(), name: "lili", age: 21, gender: 2 },
        { id: id(), name: "tom", age: 18, gender: 1 },
        { id: id(), name: "lucy", age: 20, gender: 2 },
      ];

      //  1. 数组对象转化为表格，输入参数，返回表格HTML
      function render(data) {
        // 2. 将数组每一个对象转换为tr行，将对象属性转换为 td 单元格
        // const trs = data.reduce((str, el) => {
        //   str += `<tr>
        //     <td>${el.id}</td>
        //     <td>${el.name}</td>
        //     <td>${el.age}</td>
        //     <td>${el.gender}</td>
        //   </tr>`;
        //   return str;
        // }, "");
        const trs = data
          .map((el) => {
            return `<tr>
            <td>${el.id}</td>
            <td>${el.name}</td>
            <td>${el.age}</td>
            <td>${el.gender === 1 ? "男" : "女"}</td>
          </tr>`;
          })
          .join("");
        return `
          <table border="1">
            <thead>
              <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
              </tr>
            </thead>
            <tbody>${trs}</tbody>
          </table>
        `;
      }

      // 排序，找一个可排序字段（数字）
      // 数字排序
      // users.sort((a, b) => {
      //   if (a.age > b.age) {
      //     return -1;
      //   } else {
      //     return 1;
      //   }
      // });
      // 英文字符排序
      users.sort((a, b) => {
        if (a.name > b.name) {
          return 1;
        } else {
          return -1;
        }
      });
      document.getElementById("box").innerHTML = render(users);
    </script>
  </body>
</html>
